import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import * as Mock from 'mockjs';
import request, { Api } from '@/request';

let id = 0;

@Component({
  components: {}
})
export default class InterfaceEdit extends Vue {
  private title: string = 'Header';

  // 入参类型
  private paramType: number = 3;

  // 出参tab
  private isSourceTab: boolean = true;

  // 表单声明
  private form: any;

  @Prop()
  // 详情数据
  private detail: any;

  // 计算属性 设置mock值
  get mockData() {
    if (this.detail && this.detail.mock) {
      return this.detail.mock.mockData;
    }
    return '';
  }

  // 表单布局
  private formLayout: string = 'vertical';

  // json5入参源数据
  private paramEditor: any;

  // json5响应源数据
  private responseEditor: any;

  // 移除动态表单
  public remove(k: any) {
    const { form } = this;
    // 读取动态字段数组
    const keys = form.getFieldValue('formOrQueryParam');
    // 设置动态字段
    form.setFieldsValue({
      formOrQueryParam: keys.filter((key: any) => key !== k)
    });
  }

  // 动态增加表单
  public add() {
    const count = id++;
    const { form } = this;
    // 读取动态字段数组
    const keys = form.getFieldValue('formOrQueryParam');
    const nextKeys = keys.concat(count);
    // 设置动态字段
    form.setFieldsValue({
      formOrQueryParam: nextKeys
    });
  }

  // 提交
  public handleSubmit(e: any) {
    e.preventDefault();
    this.form.validateFields((err: any, values: any) => {
      if (err) {
        return;
      }
      console.log('表单接收值', values);
      const param = {
        // 接口id
        id: this.detail.id,
        // 接口名称
        interfaceName: values.interfaceName,
        // 接口描述
        description: values.description,
        // 接口方法
        method: values.method,
        // 接口前缀
        prefix: values.prefix,
        // 接口地址
        path: values.path,
        // 参数类型
        paramType: this.paramType,
        // 入参json
        paramJSON: '',
        // 表单参数
        formOrQueryParam: [],
        // mock数据
        mock: {
          id: this.detail.mock.id,
          sourceData: '',
          mockData: ''
        }
      };
      // json类型 传json源数据
      if (this.paramType === 2) {
        param.paramJSON = JSON.stringify(this.paramEditor.getValue());
        // delete param.formOrQueryParam;
      } else {
        const names: any = [];
        // 非json类型 传list
        values.names.filter((item: any, index: number) => {
          values.formOrQueryParam.map((key: number) => {
            if (key === index) {
              names.push(item);
            }
          });
        });
        param.formOrQueryParam = names;
      }

      // json5
      const sourceData = this.responseEditor.getValue();

      let json5Data = '';

      try {
        json5Data = JSON5.parse(sourceData);
      } catch (reason) {
        return;
      }
      // 赋值源代码
      param.mock.sourceData = JSON5.stringify(sourceData);
      param.mock.mockData = JSON.stringify(Mock.mock(json5Data));

      console.log('入参: ', param);

      // 调保存接口
      request.post(Api.editSaveInterface, param).then(resp => {
        console.log(resp);
      });
    });
  }

  // 生命周期 实例生成之前
  public beforeCreate() {
    const owner = this;
    this.form = this.$form.createForm(this);
    // 初始化动态表单
    this.form.getFieldDecorator('formOrQueryParam', {
      initialValue: [],
      preserve: true
    });
    // 初始化接口名称
    this.form.getFieldDecorator('interfaceName', {
      initialValue: '',
      preserve: true
    });
    // 初始化详情
    this.form.getFieldDecorator('description', {
      initialValue: '',
      preserve: true
    });
  }

  @Watch('detail')
  private watchDetail() {
    const owner = this;
    const obj: any = {};
    this.detail.formOrQueryParam.map((item: any, index: any) => {
      obj[index] = item;
    });
    this.form.setFieldsValue({
      // 接口名称
      interfaceName: this.detail.interfaceName,
      // 接口描述
      description: this.detail.description,
      // 接口方法
      method: this.detail.method,
      // 接口前缀
      prefix: this.detail.prefix,
      // 接口地址
      path: this.detail.path,
      // 参数列表
      formOrQueryParam: this.detail.formOrQueryParam.map(
        (item: any, index: any) => {
          id++;
          return index;
        }
      )
    });

    setTimeout(() => {
      const names = owner.form.getFieldValue('names');
      Object.values(names).map((name: any, index: number) => {
        owner.detail.formOrQueryParam.map((param: any, paramIndex: number) => {
          if (index === paramIndex) {
            name.fieldName = param.fieldName;
            name.fieldType = param.fieldType;
            name.fieldDescription = param.fieldDescription;
            name.fieldExample = param.fieldExample;
          }
        });
      });

      owner.form.setFieldsValue({
        names
      });
    });

    // 参数类型
    this.paramType = this.detail.paramType;
    this.$nextTick(() => {
      // 参数源代码
      if (this.detail.paramJSON) {
        this.paramEditor.setValue(JSON5.parse(this.detail.paramJSON));
      }
      // 响应源代码
      if (this.detail.mock.sourceData) {
        this.responseEditor.setValue(JSON5.parse(this.detail.mock.sourceData));
      }
    });
  }

  // 生命周期 dom生成
  private mounted() {
    const JavaScriptMode = ace.require('ace/mode/json').Mode;

    this.paramEditor = ace.edit('interface-data');
    this.paramEditor.setTheme('ace/theme/chrome'); // 设置主题
    this.paramEditor.session.setMode(new JavaScriptMode()); // 设置程序语言模式

    this.responseEditor = ace.edit('interface-source-data');
    this.responseEditor.setTheme('ace/theme/chrome'); // 设置主题
    this.responseEditor.session.setMode(new JavaScriptMode()); // 设置程序语言模式

    // 自定义补全列表
    // var autoCompleteData = [
    //   {
    //     name: "mock string",// 没啥用
    //     value: "@string",// 实际的值
    //     caption: "@string",// 显示在补全列表中的值
    //     meta: "Mock-String",// 显示在补全列表中的说明
    //     type: "local",//好像也没啥用
    //     score: 1000//评分越高越靠前
    //   },
    //   {
    //     name: "mock number",// 没啥用
    //     value: "@number",// 实际的值
    //     caption: "@number",// 显示在补全列表中的值
    //     meta: "Mock-Number",// 显示在补全列表中的说明
    //     score: 1000//评分越高越靠前
    //   },
    //   {
    //     name: "mock integer",// 没啥用
    //     value: "@integer",// 实际的值
    //     caption: "@integer",// 显示在补全列表中的值
    //     meta: "Mock-Integer",// 显示在补全列表中的说明
    //     score: 1000//评分越高越靠前
    //   },
    //   {
    //     name: "mock image",// 没啥用
    //     value: Random.image('200x100'),// 实际的值
    //     caption: "@image",// 显示在补全列表中的值
    //     meta: "Mock-Image",// 显示在补全列表中的说明
    //     score: 1000//评分越高越靠前
    //   },
    // ]
    // 设置自动补全
    // var tangideCompleter = {
    //   identifierRegexps: [/[a-zA-Z_0-9\@\-\u00A2-\uFFFF]/],
    //   getCompletions: function (editor, session, pos, prefix, callback) {
    //     if (prefix.length === 0) {
    //       return callback(null, []);
    //     } else {
    //       return callback(null, autoCompleteData);
    //     }
    //   }
    // };
    // editor.setOptions({
    //   enableBasicAutocompletion: true,
    //   enableSnippets: true,
    //   enableLiveAutocompletion: true
    // });
    // var langTools = ace.require("ace/ext/language_tools");
    // langTools.addCompleter(tangideCompleter);

    // // 设置全屏
    // editor.commands.addCommand({
    //   name: "fullscreen",
    //   bindKey: { win: "Ctrl-Enter", mac: "Command-Enter" },
    //   exec: function (editor) {
    //     // 通过css来控制全屏
    //     if (editor.isFullScreen) {
    //       $('#interface-data').css({
    //         position: 'relative',
    //         left: 0,
    //         top: 0,
    //         width: '100%',
    //         height: '300px',
    //         'z-index': 'auto'
    //       })
    //       editor.resize();
    //       editor.isFullScreen = false;
    //       document.body.style.overflow = "auto";
    //     } else {
    //       $('#interface-data').css({
    //         position: 'fixed',
    //         left: 0,
    //         top: 0,
    //         width: $(window).width(),
    //         height: $(window).height(),
    //         'z-index': '1000'
    //       })
    //       editor.resize();
    //       editor.isFullScreen = true;
    //       document.body.style.overflow = "hidden";
    //     }
    //   },
    //   readOnly: true // 只读下设置可以全屏展示
    // });

    // editor.getSession().setUseWrapMode(true);//设置折叠 默认折叠的
    this.paramEditor.getSession().setTabSize(2); // 设置制表符大小
    this.responseEditor.getSession().setTabSize(2); // 设置制表符大小
  }

  // 声明周期 实例生成
  private created() {}
}
